<template>
	<view class="champion-guess" :style="{background:activityDataStatus?'#151C38':''}">
		<block  v-if="activityDataStatus">
			<view class="cg_banner">
				<image class="imgBox" :src="activityData.img" mode="widthFix"></image>
			</view>
			<view class="cg_nav dc">
				<view class="cg_nav_left dc">
					<text class="text01">CoCo余额：</text>
					<block v-if="loginStatus">
						<text class="text02">{{activityData.usable}}</text>
					</block>
					<view @click="loginFunc" class="noLogin dc"  v-else>
						<text>未登录</text>
						<image src="/static/index/activity/ac_r.png" mode=""></image>
					</view>
				</view>
				<navigator :url="'/pages/index/activity-rules/activity-rules?imgUrl='+activityData.ruleImg" class="cg_nav_right dc">
					<image src="/static/index/activity/ac_w.png" mode=""></image>
					<text>活动规则</text>
				</navigator>
			</view>
			<view class="victorious_team" v-if="activityData.eventsStatus == 4">
				<view class="win_icon">
					<image :src="activityData.teamIcon?activityData.teamIcon:'/static/index/logoIcom.png'" mode=""></image>
				</view>
				<view class="win_name">{{activityData.teamName}}</view>
			</view>
			<view class="cg_list">
				<view class="cg_item" :class="{'on':index == dataIndex}" v-for="(item,index) in dataList" :key="index" @click="changeIndex(item,index)">
				   <image class="img" :src="item.icon != ''?item.icon:'/static/index/logoIcom.png'" mode=""></image>
				   <view  class="img_name ellipseHide">{{item.name}}</view>
				   <view class="fen">{{item.odds}}倍</view>
				</view>
			</view>
			<view class="cg_time">
				<text>支持截止时间：{{activityData.deadline}}</text>
				<block v-if="loginStatus">
					<navigator class="cg_time_right" hover-class="none" :url="'./champion-record/champion-record?id='+id" >
						<text>支持记录</text>
						<image src="/static/blindbox/right_w01.png" mode=""></image>
					</navigator>
				</block>
			</view>
			<view class="cg_but" @click="bettingImmediately" v-if="activityData.eventsStatus == 1">立即支持</view>
			<view class="cg_but cg_but_one"  v-else-if="activityData.eventsStatus == 4">活动已结束</view>
			<view class="cg_but cg_but_two"  v-else >待揭晓</view>
			
			<DetailDialog ref="popupBox"  v-if="popupBoxStatus" @determine="determine" @close='close' :payNumber="activityData.minBetAmount" ></DetailDialog>
		</block>
		<block v-if="activityDataStatus == false" >
			<view class="no_info">
				<image src="/static/my/news_no.png" mode="widthFix"></image>
				<text>活动已下架</text>
			</view>
		</block>
	</view>
	
</template>

<script>
	import DetailDialog from './components/DetailDialog.vue'
	import { rsaEncrypt } from '@/common/RSA.js'
	import { getChampionTeamList,getActivityInfo,getActivityChampionPay} from '@/api/api-v1-2.js'
	export default {
		components: {
		   DetailDialog,
		},
		data() {
			return {
				dataIndex:null, //下注下标
				popupBoxStatus:false,
				loginStatus:true,
				dataList:[], //数据列表
				id:'',
				activityId:'',// 投注对象id
				activityData:{}, //活动信息
				activityDataStatus:null //活动是否停用
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getChampionTeamList()
			// 判定是否是安卓登录
			if(e.app != undefined && e.time != undefined){
				this.getAppAndroid()
				this.$queue.setData('app','android')
			}else{
				if (this.$queue.getData('token') == undefined) {
					this.loginStatus = false
				}else{
					this.loginStatus = true
				}
				this.getActivityInfo()
			}
		},
		onShow(){
			this.close()
		},
		methods: {
			// 获取安卓信息
			getAppAndroid(){
				var token = window.Android.onGetToken();
				if(token != ''){
					this.$queue.setData('token',token)
					this.loginStatus = true
				}else{
					this.loginStatus = false
					uni.removeStorageSync('token')
				}
				this.getActivityInfo()

			},
			// 获取竞猜活动信息（H5）
			async getActivityInfo(){
				var res = await getActivityInfo(this.id)
				if(res.result == ''){
					this.activityDataStatus = false
				}else{
					this.activityDataStatus = true
					this.activityData = res.result
					uni.setNavigationBarTitle({
						title:this.activityData.name
					})
				}
			},
			// 登录
			loginFunc(){
				// 判定是否是安卓
				if(this.$queue.getData('app') != undefined){
					 window.Android.onLogin()
				}else{
					var url = '/pages/index/guessing-competition/champion-guess?id='+this.id
					uni.redirectTo({
						url:"/pages/login/login?linkJump="+url
					})
				}
			},
			// 查询冠军竞猜投注对象列表
			async getChampionTeamList(){
				var res = await getChampionTeamList(this.id)
				this.dataList = res.result
			},
		  changeIndex(item,index){
			  this.dataIndex = index
			  this.activityId = item.id
		  },
		  openPupop(){
			  this.popupBoxStatus = true
		  },
		  close(){ 
			  this.popupBoxStatus = false
		  },
		  // 立即投注
		  bettingImmediately(item){
			  if(this.loginStatus == false){
				  this.$queue.showToast('请登录！')
			  }
			  else if(this.paytimeQuantum(this.activityData.deadline)){
				   this.$queue.showToast('已停止支持！')
			  }
			  else if(this.activityId == ''){
				  this.$queue.showToast('请选择支持对象！')
			  }else{
				  this.openPupop()
			  }
			  
		  },
		  // 判定当前时间是否大于 给定时间  大于false 小于true 
		  paytimeQuantum(paytime) {
		  	if (paytime != null) {
		  		paytime = new Date(paytime.replace(/-/g, '/'));//获取传入时间 并将其转化为date型
		  		var nowTime = new Date(); //获取当前时间
		  		if (paytime < nowTime) {
		  			return true
		  		}
		  		return false
		  	} else {
		  		return false
		  	}
		  },
			// 输入正确 密码调用
			async determine(e){
				var data = {
					betAmount:e.betAmount,
					id:this.activityId,
					tradePassword:e.password,
				}
				let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
				let params = {
					encryptData: jiami
				}
				uni.showLoading({
					title:'加载中。。。',
					mask:true
				})
				try{
					var res = await getActivityChampionPay(params)
					uni.hideLoading()
					this.close()
					this.$queue.showToast('投注成功！');
					// this.dataList = []
					this.getActivityInfo()
					
				}catch{
					this.$refs.popupBox.password = ''
					uni.hideLoading()
				}
				
				
			},
		}
	}
</script>

<style scoped>
	page{
		/* background: #151C38; */
		height: 100%;
	}

	.cg_banner {
		width: 750rpx;
		margin-bottom: 68rpx;
	}
	.champion-guess{
		/* height: 100%; */
		min-height: 100%;
		padding-bottom: 80rpx;
		/* background: #151C38; */
	}
	.dc{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	/* 标题头 */
	.cg_nav{
		width: 690rpx;
		height: 94rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		background: url('/static/index/activity/ac_nav.png') no-repeat;
		background-size: 100% 100%;
		padding: 0 36rpx;
		box-sizing: border-box;
        justify-content: space-between;
	}
	.cg_nav_left text{
		font-size: 30rpx;
		color: #fff;
	}
	.cg_nav_left .text02{
		font-size: 56rpx;
		color: #FFCC90;
		margin-left: 10rpx;
	}
	.noLogin text{
		border-bottom: 2rpx solid #ffffff;
	}
	.noLogin image{
		width: 14rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}
	.cg_nav_right{
		font-size: 28rpx;
		color: #ffffff;
	}
	.cg_nav_right image{
		width: 34rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}
	/* end */
	/* 胜利队伍 图标*/
	.victorious_team{
		margin-top: 44rpx;
		margin-bottom: 60rpx;
		width: 100%;
		display:block
	}
	.win_icon{
		width: 332rpx;
		height: 240rpx;
		background: url('/static/index/wing.png') no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}
	.win_icon image{
		width: 152rpx;
		height: 152rpx;
		border-radius: 50%;
		margin-bottom: 12rpx;
	}
	.win_name{
		width: 100%;
		text-align: center;
		margin-top: 14rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 40rpx;
		background: linear-gradient(90deg, #D7A036 3.75%, #EBCE73 51.87%, #CE9018 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}
	/* end */
	/* 列表 */
	.cg_list{
		width: 750rpx;
		box-sizing: border-box;
		padding: 0 32rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 72rpx;
	}
	.cg_item{
		width: 202rpx;
		height: 302rpx;
		background: #1F284E;
		border: 2rpx solid #1F284E;
		border-radius: 4rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
		/* margin-right: 40rpx; */
	}
	.cg_list .on{
		background: #0E2B9B;
		border: 2rpx solid #2187FF;
	}
	/* 如果最后一行是2个元素 */
	.cg_item:last-child:nth-child(3n - 1) {
	    margin-right: 242rpx;
	}
	/* 如果最后一行是1个元素 */
	.cg_item:last-child:nth-child(3n - 2) {
	    margin-right: 484rpx;
	}
	.cg_item .img_name{
		width: 180rpx;
		font-size: 30rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 14rpx;
		margin-bottom: 22rpx;
	}
	.cg_item .img{
		width: 120rpx;
		height: 120rpx;
		border: 3rpx solid #356AD5;
		border-radius: 50%;
		overflow: hidden;
	}
	.cg_item .fen{
		width: 104rpx;
		height: 42rpx;
		background: rgba(0, 0, 0, .4);
		border-radius: 200rpx;
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		line-height: 42rpx;
	}
   /* end */

   .cg_time{
	   width: 690rpx;
	   font-size: 28rpx;
	   color: #FFFFFF;
	   text-align: center;
	   margin: 40rpx auto 22rpx auto;
	   display: flex;
	   flex-direction: row;
	   align-items: center;
	   justify-content: space-between;
   }
   .cg_time_right{
	   color: #fff;
	   display: flex;
	   flex-direction: row;
	   align-items: center;
   }
   .cg_time_right image{
	   width: 18rpx;
	   height: 18rpx;
	   margin-left: 2rpx;
   }
   .cg_but{
	 width: 690rpx;
	 height: 100rpx;
	 background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
	 border-radius: 8rpx;
	 font-size: 44rpx;
	 color: #ffffff;
	 text-align: center;
	 line-height: 100rpx;
	 margin: 0 auto;
   }
   .cg_but_one{
		background: #222C54;
		color: #6C77A3;
   }
   .cg_but_two{
	   background: linear-gradient(90deg, #001C8D 0%, #3E008C 98.24%);
   }
  
</style>
